<!-- search.html -->
<div class="container mt-3">
    <div class="row">
        <div class="col-md-8">
            <div class="input-group mb-3">
                <input type="text" class="form-control" id="searchKeyword" placeholder="输入股票名称、代码或简写">
                <div class="input-group-append">
                    <button class="btn btn-primary" id="searchBtn">搜索</button>
                </div>
            </div>

            <div class="card">
                <div class="card-header">搜索结果</div>
                <div class="card-body">
                    <table class="table table-hover" id="searchResultTable">
                        <thead>
                        <tr>
                            <th>代码</th>
                            <th>名称</th>
                            <th>市场</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">我的分组</div>
                <div class="card-body">
                    <ul class="list-group" id="groupList">
                        <!-- 分组列表动态加载 -->
                    </ul>
                    <div class="mt-3">
                        <input type="text" class="form-control" id="newGroupName" placeholder="新分组名称">
                        <button class="btn btn-sm btn-success mt-2" id="addGroupBtn">添加分组</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function() {
        // 搜索股票
        $('#searchBtn').click(function() {
            let keyword = $('#searchKeyword').val();
            $.get('/stock/search', {keyword: keyword}, function(res) {
                let tbody = $('#searchResultTable tbody').empty();
                res.data.forEach(stock => {
                    tbody.append(`
                    <tr>
                        <td>${stock.code}</td>
                        <td>${stock.name}</td>
                        <td>${stock.market}</td>
                        <td>
                            <button class="btn btn-sm btn-primary add-stock" data-id="${stock.id}">添加</button>
                        </td>
                    </tr>
                `);
                });
            });
        });

        // 添加股票
        $(document).on('click', '.add-stock', function() {
            let stockId = $(this).data('id');
            $.post('/stock/add', {id: stockId}, function() {
                alert('添加成功');
                // 默认添加到自选分组
                $.post('/group/addStock', {groupId: 1, stockId: stockId});
            });
        });

        // 加载分组
        loadGroups();

        // 添加分组
        $('#addGroupBtn').click(function() {
            let name = $('#newGroupName').val();
            $.post('/group/create', {name: name}, function() {
                loadGroups();
                $('#newGroupName').val('');
            });
        });

        function loadGroups() {
            $.get('/group/list', function(res) {
                let ul = $('#groupList').empty();
                res.data.forEach(group => {
                    ul.append(`<li class="list-group-item">${group.name}</li>`);
                });
            });
        }
    });
</script>